<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>查询页面</title>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<link th:href="@{../../css/bootstrap.min.css}" href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"/>
	<link th:href="@{../../imgs/favicon.ico}" href="../../imgs/favicon.ico" rel="icon" type="image/x-icon" media="all"/>
	<script type="text/javascript" th:src="@{../../js/jquery.min.js}" src="../../js/jquery.min.js" ></script>
	<script type="text/javascript" th:src="@{../../js/bootstrap.min.js}" src="../../js/bootstrap.min.js" ></script>
	<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
	<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
	<script type="text/javascript" th:src="@{/js/echarts/china.js}"></script>
</head>
<script type="text/javascript"  th:inline="javascript">
	var cList = [[${cList}]];
	var sList = [[${sList}]];
	var tList = [[${tList}]];

	var vv = 0;
	var vh = 0;

	console.log(cList);
	console.log(sList);

	$(function(){
		var xgcx = $("#xgcx");
		xgcx.append('<span class="label_title color_1">相关查询：</span>');
		if (cList){
			vv = cList[0].value;
			vh = cList[0].harm;
			console.log(cList);
			console.log(vv);
			for(var i=0; i<cList.length; i++){
				xgcx.append('<a  class ="new_label" href="/user/search/index?word='+cList[i].content+'">'+cList[i].content+'</a> ');
			}
		}

		// 近期查询
		var jqcx = $("#jqcx");
		jqcx.append('<span class="label_title color_2">近期查询：</span>');
		if (sList){
			for(var i=0; i<sList.length; i++){
				jqcx.append('<a class ="new_label" href="/user/search/index?word='+sList[i].content+'">'+sList[i].content+'</a> ');
			}
		}

		jqcx.append('</br><hr/><span class="label_title color_1">TOP 10 ：</span>');
		if (tList){
			for(var i=0; i<tList.length; i++){
				jqcx.append('<a class ="new_label" href="/user/search/index?word='+tList[i].content+'">'+tList[i].content+'</a> ');
			}
		}

		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		var dom = document.getElementById("dj");

		option = null;
		option = {
			title: {
				text: '价值和危害等级饼图',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: ['危害等级(0-4级)', '每千克/元']
			},
			series: [
				{
					name: '价值危害',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: [
						{value: vh, name: '危害等级(0-4级)'},
						{value: vv, name: '每千克/元'}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};

		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}

	});

	function searchWord() {
		var word = $('#inputv').val();
		window.location.href = "/user/search/index?word="+word;
	}
</script>
<body style="background-color:#ecf0f1">
<div id="container" style="height: 93%;width: 37%; float: right; top: 260px; left: 40px; z-index: 100"></div>

<style type="text/css">
	.color_1 {
		color: #3F85F1;
		padding-left: 2px;
	}
	.color_2 {
		color: #ec4335;
		padding-left: 2px;
	}
	.color_3 {
		color: #FCBC27;
		padding-left: 2px;
	}
	.color_4 {
		color: #2FA858;
		padding-left: 2px;
	}
	.new_label {
		display: inline-block;
		padding: 4px 6px;
		margin: 2px 4px;
		line-height: 16px;
		vertical-align: baseline;
		white-space: nowrap;
		background-color: #ecf0f1;;
		color: #404040;
		text-decoration: none;
		border: 1px solid #7ba8ce;
		border-radius: 8px;
	}

	a:hover,a:focus {
		color: #0aa284;
	}

	.panel-body div {
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	.list_line div {
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}

	h1 {
		font-size:30px;
		margin-top: 13px;
	}


	ul {
		padding-inline-start:0px;
	}
	ul li {
		list-style: none;
		font-size: 15px;
		line-height: 1.4;
	}

	ul li a {
		float: left;
		color:#333;
	}
	ul li span {
		float: right;
	}

	.fleft {
		float: right;
	}

	.theader {
		border-bottom-color: rgb(183, 9, 9);
		border-bottom-color: #cccccc;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		font-size: 15px;
		font-weight: bold;
		padding: 0px 6px;
		margin-bottom: 5px;
	}

	.city_list a {
		padding: 4px 6px;
		margin: 2px 4px;
		color: black;
		font-size: initial;
	}

	.label_title {
		font-size: 16px;
		font-weight: bold;
	}

	.z_list_a {
		width: 70%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flink a {
		color:#787878;
		margin-right: 10px;
	}
	.pydocx-caps {
		text-transform: uppercase
	}

	.pydocx-center {
		text-align: center
	}

	.pydocx-comment {
		color: blue
	}

	.pydocx-delete {
		color: red;
		text-decoration: line-through
	}

	.pydocx-hidden {
		visibility: hidden
	}

	.pydocx-insert {
		color: green
	}

	.pydocx-left {
		text-align: left
	}

	.pydocx-list-style-type-cardinalText {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimal {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalEnclosedCircle {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalEnclosedFullstop {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalEnclosedParen {
		list-style-type: decimal
	}

	.pydocx-list-style-type-decimalZero {
		list-style-type: decimal-leading-zero
	}

	.pydocx-list-style-type-lowerLetter {
		list-style-type: lower-alpha
	}

	.pydocx-list-style-type-lowerRoman {
		list-style-type: lower-roman
	}

	.pydocx-list-style-type-none {
		list-style-type: none
	}

	.pydocx-list-style-type-ordinalText {
		list-style-type: decimal
	}

	.pydocx-list-style-type-upperLetter {
		list-style-type: upper-alpha
	}

	.pydocx-list-style-type-upperRoman {
		list-style-type: upper-roman
	}

	.pydocx-right {
		text-align: right
	}

	.pydocx-small-caps {
		font-variant: small-caps
	}

	.pydocx-strike {
		text-decoration: line-through
	}

	.pydocx-tab {
		display: inline-block;
		width: 4em
	}

	.pydocx-underline {
		text-decoration: underline
	}

	/*
    body {
        margin: 0px auto;
        width: 49.61em
    }
    */

	.about_list {
		max-width: 600px;
		display:inline-block;
		text-align: justify;
	}
</style>
<div class="container">

	<div class="row hidden-xs">
      <div style="height:30px"></div>
  	</div>
	<div class="row">
		<div class="col-md-12  col-xs-12">
			<div style="text-align: center;">
				<img src="../../imgs/favicon.png" class="img-responsive center-block" width="50px" style="display: inline;">
				<h1 style="display: inline;vertical-align: middle;">垃圾分类查询</h1>
			</div>
		</div>
	</div>
	<br>

	<div class="row">
		<div class="col-md-offset-2 col-md-8 col-xs-12">
			<div style="text-align: center;display: flex">
			  	<input name="URLz" class="form-control input-lg" value="" placeholder="" type="text" id="inputv" />
			  	<button class="btn btn-primary input-lg" type="submit" onclick="searchWord()"><strong><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</strong></button>
			</div>
		</div>
	</div>
	<br>

	<div class="row">
		<div class="col-md-offset-2 col-md-8 col-xs-12" style="text-align: center;">
			 <div id="tbk_ad" style="margin-bottom: 5px"></div>
		</div>
	</div>

	<div class="row">
	  <div class="col-md-offset-2 col-md-8 col-xs-12" id="xgcx">
	  </div>
	</div>
	<br>

	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12" style="text-align: center;">

			<div style="width:fit-content; display:inline-block;border: 1.3px dashed #3c85ee;border-radius: 8px;padding:0px 20px;"><h1><span style="color:#D42121;" th:text="${wordName}">香瓜子</span><span style="color:#FBbC28;" th:text="${tt}">&nbsp;属于&nbsp;</span><span style="#2e2a2b"  th:text="${wordTpye}">湿垃圾</span></h1></div>
			<br>
			<div style="display:inline-block">
				<div style="display: inline;">&nbsp;</div>
				<div style="display: inline;" class="addthis_inline_share_toolbox"></div>
			</div>

			<div id="adsense_middle"></div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12">
			<hr style="border-color: #d0d0d0">
		</div>
	</div>
	<div id="dj" style="height: 85%;width: 35%; float: right; top: 300px; z-index: 100">
		危害等级:<br/>
		0级: 无害; 1级:一般; 2级:严重; 3级;非常危险; 4级:致命
	</div>

 	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12">
			<div class="row">
				<div class="col-md-12 col-xs-12"><h3 style="text-align: left;" th:text="${typeTipTitle}">湿垃圾是指</h3></div>
				<div class="col-md-12 col-xs-12" th:text="${typeTip}">日常生活垃圾产生的容易腐烂的生物质废弃物</div>
			</div>
		</div>
	</div>


	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12">
			<div class="row">
				<div class="col-md-12 col-xs-12"><h3 style="text-align: left;" th:text="${typeIncludeTitle}">湿垃圾主要包括</h3></div>
				<div class="col-md-12 col-xs-12" th:text="${typeInclude}">剩菜剩饭、瓜皮果核、花芬绿植、过期食品等</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-offset-1 col-md-10 col-xs-12">
			<div class="row">
				<div class="col-md-12 col-xs-12"><h3 style="text-align: left;" th:text="${typeAskTitle}">湿垃圾投放要求</h3></div>
			</div>
			<div class="row">
				<div class="col-md-12 col-xs-12">
					<ul>
						<li th:text="${typeAsk}">纯流质的食物垃圾、如牛奶等，应直接倒进下水口</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<br>
	<div class="row">
	  <div class="col-md-offset-1 col-md-10 col-xs-12" id="jqcx">


	  </div>
	</div>

	<br>

	<div class="row">
	  <div class="col-md-offset-1 col-md-10 col-xs-12">
	    <div id="adsense_bottom"></div>
	  </div>
	</div>
	<br>

	<br>
	<div class="row">
		  <div class="col-md-offset-1 col-md-10 col-xs-12">
		      <div class="row">
		        <div class="col-md-6 col-xs-12"> 
		          <div class="row" style="border: 1px dashed #dfdfdf;"> 
		            <div class="col-md-3 col-xs-3"> 
		              <img style="max-width: 100px;" alt="可回收物" src="../../imgs/1_3F6BA8.svg">
		            </div> 
		            <div class="col-md-9 col-xs-9" style="color: #3F6BA8;padding-left: 22px;vertical-align: middle;"> 
		                <h3 style="margin-top: 0px">可回收物</h3> 
		                <p style="">指废纸张、废塑料、废玻璃制品、废金属、废织物等适宜回收、可循环利用的生活废弃物。</p> 
		            </div> 
		          </div> 
		        </div> 

		        <div class="col-md-6 col-xs-12"> 
		          <div class="row" style="border: 1px dashed #dfdfdf;"> 
		            <div class="col-md-3 col-xs-3"> 
		              <img style="max-width: 100px;" alt="有害垃圾" src="../../imgs/2v_B43953.svg">
		            </div> 
		            <div class="col-md-9 col-xs-9" style="color: #B43953;padding-left: 22px;vertical-align: middle;"> 
		                <h3 style="margin-top: 0px">有害垃圾</h3> 
		                <p style="">指废电池、废灯管、废药品、废油漆及其容器等对人体健康或者自然环境造成直接或者潜在危害的生活废弃物。</p> 
		            </div> 
		          </div> 
		        </div> 
		      </div>
		      <div class="row">

		        <div class="col-md-6 col-xs-12"> 
		          <div class="row" style="border: 1px dashed #dfdfdf;"> 
		            <div class="col-md-3 col-xs-3"> 
		              <img style="max-width: 100px;" alt="湿垃圾" src="../../imgs/3v_8F6F55.svg">
		            </div> 
		            <div class="col-md-9 col-xs-9" style="color: #8F6F55;padding-left: 22px;vertical-align: middle;"> 
		                <h3 style="margin-top: 0px">湿垃圾</h3> 
		                <p style="">即易腐垃圾，指食材废料、剩菜剩饭、过期食品、瓜皮果核、花卉绿植、中药药渣等易腐的生物质生活废弃物。</p> 
		            </div> 
		          </div> 
		        </div> 

		        <div class="col-md-6 col-xs-12"> 
		          <div class="row" style="border: 1px dashed #dfdfdf;"> 
		            <div class="col-md-3 col-xs-3"> 
		              <img style="max-width: 100px;" alt="干垃圾" src="../../imgs/4_2F3D39.svg">
		            </div> 
		            <div class="col-md-9 col-xs-9" style="color: #2F3D39;padding-left: 22px;vertical-align: middle;"> 
		                <h3 style="margin-top: 0px">干垃圾</h3> 
		                <p style="">即其它垃圾，指除可回收物、有害垃圾、湿垃圾以外的其它生活废弃物。</p> 
		            </div> 
		          </div> 
		        </div> 
		      </div>

		  </div>
		</div>

</div>
</body>
</html>
